<style>
  .card{
    background-color:#fff;
    border: 1px solid #d8d8d8;
    cursor: pointer;
  }
  .scoreBox{

  }
  .bg{
    background-color: #f5f5f5;
  }
  .name{
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #37a;
    overflow: hidden;
  }
  .icon{
    height: 16px;
    width: 16px;
    font-size: 16px;
  }
  .time{
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #666;

  }
  .mytitle{
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px ;
  }
  ::ng-deep .ant-rate {
    color: #37a;
    font-size: 13px;

  }
  .space{
    margin-bottom: 15px;
  }
  ::ng-deep .ant-empty {

    text-align: left;
  }
</style>
<div style="height: 100px" class="bg"></div>
<div class="center bg" >
  <div style="width: 80%">
    <!--我的评分电影-->
    <div class="mytitle left">
      <mat-icon style="margin-right: 5px">theaters</mat-icon>
      我的评分电影
    </div>
    <div *ngIf="movies===null">
      <nz-empty></nz-empty>
    </div>
    <mat-grid-list  *ngIf="movies!==null || movies.length!==0" cols="6"  rowHeight="2:3" gutterSize="25px" >
      <mat-grid-tile
        *ngFor="let m of movies"
        [colspan]="1"
        [rowspan]="1"
        routerLink="/home/detail/{{m.mid}}">
        <div style="width: 100%;height: 100%">
          <div class="card" style="width: 98%;height: 83%">
            <div  style="height: 25%">
              <mat-grid-list cols="6">
                <mat-grid-tile [colspan]="5" [rowspan]="1" class="name center">
                  <span>{{m.name}}</span>
                </mat-grid-tile>
                <mat-grid-tile [colspan]="1" [rowspan]="1" >
                  <mat-icon class="icon center">movie</mat-icon>
                </mat-grid-tile>
                <mat-grid-tile [colspan]="6" [rowspan]="1" class="time left">
                  <span>{{m.issue}} | {{m.timelong}}</span>
                </mat-grid-tile>
              </mat-grid-list>
            </div>
            <div style="height: 75%">
              <img  style="height: 100%;width: 100%" src="{{m.url}}">
            </div>
          </div>
          <div class="scoreBox" style="width: 98%;height: 25px">
            <mat-grid-list cols="6">
              <mat-grid-tile [colspan]="1" [rowspan]="1">
                <mat-icon  style="font-size: 25px">playlist_play</mat-icon>
              </mat-grid-tile>
              <mat-grid-tile [colspan]="5" [rowspan]="1">
                <nz-rate style="height: 100%;width: 100%;" [ngModel]="m.score" nzAllowHalf nzDisabled></nz-rate>
              </mat-grid-tile>
            </mat-grid-list>
          </div>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>
<div style="height: 100px" class="bg" id="full"></div>
